import * as React from 'react';
import { View, Text, StyleSheet, ImageBackground, } from 'react-native';

interface IHomeTopCardProps {
  dataSource: {
    status: 0,
    balance: 0,
  },
  onPress(status): any
}

class HomeTopCard extends React.Component<IHomeTopCardProps> {

  renderCardContent = () => {
    const {status, balance} = this.props.dataSource;
    console.log('TAGGG', "renderCardContent====status==" + status + ', balance=' + balance)
    if (status == 1) {
      return (
        <View>
          <Text style={styles.textCommon}>资产总计(USD)</Text>
          <Text style={styles.textCommon}>{balance + '元'}</Text>
          <Text 
            style={styles.detailBtn}
            onPress={() => {
              this.props.onPress(status);
            }}
          >查看详情</Text>
          <View style={styles.line} />
          <Text style={styles.textCommon}>{balance + '元'}</Text>
        </View>
      );
    }
    return (
      <View style={styles.openAccountWrapper}>
        <Text style={styles.textCommon}>致力于为用户提供</Text>
        <Text style={styles.textDesc}>专业的国际银行服务</Text>
        <Text 
          style={styles.openAccountBtn}
          onPress={() => {
            this.props.onPress(status);
          }}
        >{status == 0 ? '境外账户申请' : '认证申请'}</Text>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          style={styles.imageBkg}
          imageStyle={styles.imageBkg}
          source={{ uri: 'http://120.48.109.211:8088/static/icon/home.png', }}
        >
          {this.renderCardContent()}
        </ImageBackground>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    margin: 10,
  },
  openAccountWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 5,
  },
  imageBkg: {
    height: 140,
    padding: 15,
    borderRadius: 10,
  },
  textCommon: {
    color: "#FFFFFF",
    fontSize: 14,
    marginBottom: 10,
  },
  textDesc: {
    color: "#FFFFFF",
    fontSize: 18,
    marginBottom: 10,
  },
  line: {
    height: 0.4,
    marginTop: 18,
    marginBottom: 15,
    padding: -10,
    backgroundColor: "#FFFFFF",
  },
  detailBtn: {
    textAlign: 'center',
    position: 'absolute',
    color: "#1E90FF",
    right: 0,
    top: 25,
    backgroundColor: "#FFFFFF",
    width: 100,
    borderRadius: 15,
    paddingTop: 6,
    paddingBottom: 6,
    fontSize: 14,
  },
  openAccountBtn: {
    textAlign: 'center',
    color: "#1E90FF",
    backgroundColor: "#FFFFFF",
    width: 140,
    borderRadius: 4,
    paddingTop: 6,
    paddingBottom: 6,
    fontSize: 14,
    marginTop: 5,
  },
});

export default HomeTopCard